import 'dart:math';
import 'package:kongqi/global.dart';
import 'package:kongqi/http/api.dart';
import 'package:flutter/material.dart';

class DetailPage extends StatefulWidget {
  DetailPage({Key key, this.id}) : super(key: key);
  final String id;
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var _data;
  @override
  void initState() {
    String _id = widget.id;
    getKongQiDetail(_id).then((res) {
      setState(() {
        _data = res;
      });
    });
    super.initState();
  }

  Color getTextColor(text) {
    var val = int.parse(text);
    if (val < 50) {
      return Color(0xFF79b800);
    }
    if (val < 100) {
      return Color(0xFFffbb17);
    }
    if (val < 150) {
      return Color(0xFFc67901);
    }
    if (val < 200) {
      return Color(0xFFeb111b);
    }
    if (val < 300) {
      return Color(0xFFb3065b);
    }
    if (val >= 300) {
      return Color(0xFFbe004d);
    }
  }

  String getWarmtips(text) {
    var val = int.parse(text);
    if (val < 50) {
      return '各类人群可多参加户外活动，多呼吸一下清新的空气。';
    }
    if (val < 100) {
      return '除少数对某些污染物特别容易过敏的人群外，其他人群可以正常进行室外活动。';
    }
    if (val < 150) {
      return '儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少体力消耗大的户外活动。';
    }
    if (val < 200) {
      return '儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少外出，停留在室内，一般人群应适量减少户外运动。';
    }
    if (val < 300) {
      return '儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群尽量减少户外运动。';
    }
    if (val >= 300) {
      return '儿童、老年人和病人应停留在室内，避免体力消耗，除有特殊需要的人群外，一般人群尽量不要停留在室外。';
    }
  }

  List<Widget> renderWeek(items) {
    List<Widget> list = [
      Container(
        padding: EdgeInsets.fromLTRB(0, 5, 0, 7),
        margin: EdgeInsets.fromLTRB(0, 0, 0, 7),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              width: 0.5,
              color: Global.fontColor.withOpacity(0.1),
            ),
          ),
        ),
        child: Row(
          children: [
            Expanded(
              child: Center(
                child: Text(
                  '日期',
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: Text(
                  'AQI',
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
            Expanded(
              child: Center(
                child: Text(
                  '质量状况',
                  style: TextStyle(
                    color: Global.fontColor,
                    fontSize: 13,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            )
          ],
        ),
      )
    ];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      list.add(
        Container(
          padding: EdgeInsets.fromLTRB(0, 5, 0, 5),
          child: Row(
            children: [
              Expanded(
                child: Center(
                  child: Text(
                    item['date'],
                    style: TextStyle(
                      color: Global.fontColor,
                      fontSize: 13,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Center(
                  child: Text(
                    item['aqi'],
                    style: TextStyle(
                      color: Global.fontColor,
                      fontSize: 13,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      padding: EdgeInsets.fromLTRB(10, 1, 10, 1),
                      decoration: BoxDecoration(
                        color: getTextColor(item['aqi']),
                        borderRadius: BorderRadius.circular(3),
                      ),
                      child: Text(
                        item['level'],
                        style: TextStyle(
                          color: Global.backgroundColor,
                          fontSize: 13,
                          fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _data == null
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    getTextColor(_data['index']).withOpacity(1),
                    getTextColor(_data['index']).withOpacity(0),
                  ],
                ),
              ),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    SizedBox(height: Global.paddingTop + 10),
                    Row(
                      children: [
                        InkWell(
                          onTap: () {
                            Navigator.of(context).pop();
                          },
                          child: Container(
                            width: 65,
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.chevron_left,
                                  color: Global.backgroundColor,
                                  size: 26,
                                ),
                                Text(
                                  '返回',
                                  style: TextStyle(
                                    color: Global.backgroundColor,
                                    fontSize: 15,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Expanded(
                          child: Center(
                            child: Text(
                              _data['city'],
                              style: TextStyle(
                                color: Global.backgroundColor,
                                fontSize: 15,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: 65),
                      ],
                    ),
                    SizedBox(height: 25),
                    Container(
                      width: 300,
                      height: 300,
                      child: Stack(
                        children: [
                          Positioned(
                            top: 0,
                            left: 0,
                            child: Transform.rotate(
                              angle: pi *
                                  ((360 * (int.parse(_data['index']) / 400)) /
                                      180),
                              child: Container(
                                width: 300,
                                height: 300,
                                child:
                                    Image.asset('assets/images/wea_point.png'),
                              ),
                            ),
                          ),
                          Positioned(
                            top: 25,
                            left: 25,
                            child: Container(
                              width: 250,
                              height: 250,
                              child: Image.asset(
                                  'assets/images/wea_circleDet.png'),
                            ),
                          ),
                          Positioned(
                            top: 150,
                            left: 0,
                            child: Container(
                              width: 300,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    padding: EdgeInsets.fromLTRB(10, 3, 10, 3),
                                    decoration: BoxDecoration(
                                      color: getTextColor(_data['index']),
                                      borderRadius: BorderRadius.circular(20),
                                    ),
                                    child: Center(
                                      child: Text(
                                        _data['city'],
                                        style: TextStyle(
                                          color: Global.backgroundColor,
                                          fontSize: 13,
                                          fontWeight: FontWeight.w600,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            child: Container(
                              width: 300,
                              height: 220,
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text(
                                    _data['index'],
                                    style: TextStyle(
                                      color: getTextColor(_data['index']),
                                      fontSize: 62,
                                      fontWeight: FontWeight.w600,
                                    ),
                                  ),
                                  SizedBox(width: 5),
                                  Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.center,
                                    children: [
                                      SizedBox(height: 27),
                                      Text(
                                        'AQI',
                                        style: TextStyle(
                                          color: Global.fontColor,
                                          fontSize: 20,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ),
                          Positioned(
                            bottom: 70,
                            left: 75,
                            child: Container(
                              width: 150,
                              padding: EdgeInsets.only(top: 10),
                              decoration: BoxDecoration(
                                border: Border(
                                  top: BorderSide(
                                    width: 1.5,
                                    color:
                                        Global.fontSecondColor.withOpacity(0.2),
                                  ),
                                ),
                              ),
                              child: Center(
                                child: Text(
                                  _data['date'],
                                  style: TextStyle(
                                    color: Global.fontSecondColor,
                                    fontSize: 13,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 25),
                    Container(
                      width: MediaQuery.of(context).size.width - 40,
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Global.backgroundColor.withOpacity(0.6),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Row(
                        children: [
                          Container(
                            width: 60,
                            padding: EdgeInsets.only(right: 5),
                            decoration: BoxDecoration(
                              border: Border(
                                right: BorderSide(
                                  color: getTextColor(_data['index'])
                                      .withOpacity(0.15),
                                ),
                              ),
                            ),
                            child: Column(
                              children: [
                                Icon(
                                  Icons.face,
                                  color: getTextColor(_data['index']),
                                  size: 28,
                                ),
                                Text(
                                  '温馨提示',
                                  style: TextStyle(
                                    color: getTextColor(_data['index']),
                                    fontSize: 13,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Text(
                              getWarmtips(_data['index']),
                              style: TextStyle(
                                color: getTextColor(_data['index'])
                                    .withOpacity(0.8),
                                fontSize: 13,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 25),
                    Container(
                      width: MediaQuery.of(context).size.width - 40,
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Global.backgroundColor.withOpacity(0.4),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: MediaQuery.of(context).size.width - 80,
                            padding: EdgeInsets.only(bottom: 7),
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: getTextColor(_data['index'])
                                      .withOpacity(0.1),
                                ),
                              ),
                            ),
                            child: Text(
                              '最近一周空气质量指数',
                              style: TextStyle(
                                color: getTextColor(_data['index'])
                                    .withOpacity(0.8),
                                fontSize: 13,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                          SizedBox(height: 10),
                          Column(
                            children: renderWeek(_data['week']),
                          )
                        ],
                      ),
                    ),
                    SizedBox(height: 25),
                    Container(
                      width: MediaQuery.of(context).size.width - 40,
                      padding: EdgeInsets.all(10),
                      decoration: BoxDecoration(
                        color: Global.backgroundColor.withOpacity(0.4),
                        borderRadius: BorderRadius.circular(5),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            width: MediaQuery.of(context).size.width - 80,
                            padding: EdgeInsets.only(bottom: 7),
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: getTextColor(_data['index'])
                                      .withOpacity(0.1),
                                ),
                              ),
                            ),
                            child: Text(
                              '空气质量常识',
                              style: TextStyle(
                                color: getTextColor(_data['index'])
                                    .withOpacity(0.8),
                                fontSize: 13,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                          ),
                          SizedBox(height: 10),
                          Text(
                            '　　空气质量指数（AIR QUALITY INDEX，简称AQI）是定量描述空气质量状况的指数，分为五级，相对应空气质量的六个类别，其数值越大说明空气污染状况越严重，对人体健康的危害也就越大。参与空气质量评价的主要污染物为细颗粒物（PM2.5）、可吸入颗粒物（PM10）、二氧化硫（SO2）、二氧化氮（NO2）、臭氧（O3）、一氧化碳（CO）等六项。',
                            style: TextStyle(
                              color: Global.fontColor,
                              fontSize: 11,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                          SizedBox(height: 15),
                          Text(
                            '　　PM2.5是指环境空气中空气动力学当量直径小于等于 2.5 ΜM 的颗粒物，也称细颗粒物，如果空气中的含量越高，空气污染越严重，含有大量有毒有害物质，对人体和环境质量都有影响。',
                            style: TextStyle(
                              color: Global.fontColor,
                              fontSize: 11,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                          SizedBox(height: 15),
                        ],
                      ),
                    ),
                    SizedBox(height: 35),
                  ],
                ),
              ),
            ),
          );
  }
}
